@import '~choerodon-ui/lib/style/themes/default';

.c7ncd-deployment-number {
    display: flex;
    height: auto;
    width: 100%;
    margin-top: .05rem;
    &-left {
        flex: 1;
    }
    &-leftTop {
        margin-bottom: .23rem;
        &-lastestDate {
            font-weight: 400;
            margin-left: 1.32rem;
            color: rgba(0, 0, 0, 0.65);
        }
    }
    &-leftDown {
        display: flex;
        margin-top: .43rem;
        &-left {
            margin-top: .18rem;
            flex: 1;
        }
        &-right {
            width: 1.4rem;
            height: 1.4rem;
            padding: .15rem;
            margin-right: 1.51rem;
            &-rate {
                width: 110px;
                height: 110px;
                border-radius: 50%;
                text-align: center;
                background: rgba(255, 255, 255, 1);
                box-shadow: 0 4px 10px 0 rgba(86, 0, 218, 0.2);
            }
        }
    }
    &-right {
        width: 3.74rem;
        background: rgba(250, 249, 255, 1);
        padding: .2rem .4rem;
        &-list {
            // margin-left: .4rem;
        }
    }

    &-category {
        height: .32rem;
        width: 100%;
        display: flex;
        &-detail {
            flex: 1;
            margin-left: .12rem;
            display: flex;
            flex-direction: column;
            span {
                flex: 1;
                font-size: .12rem;
                font-weight: 500;
                &:first-of-type {
                    font-weight: 400;
                    color: rgba(137, 134, 156, 1);
                }
            }
        }
        & + & {
            margin-top: .31rem;
        }
        i {
            width: .32rem;
            line-height: unset;
            height: .32rem;
            font-size: 0.21rem;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
        }
        i.icon-saga_define {
            background: rgba(111, 63, 251, 0.2);
            color: rgba(111, 63, 251, 1);
        }
        i.icon-instance_outline {
            background: rgba(254, 204, 80, 0.2);
            color: rgba(254, 204, 80, 1);
        }
        i.icon-toll {
            background: rgba(247, 122, 112, 0.2);
            color: rgba(247, 122, 112, 1);
        }
        i.icon-grain {
            background: rgba(87, 170, 248, 0.2);
            color: rgba(87, 170, 248, 1);
        }
    }

    &-check {
        display: flex;
        align-items: center;

        i {
            display: inline-block;
            width: .24rem;
            height: .24rem;
            line-height: unset;
            text-align: center;
            border-radius: 50%;
            color: white;
            font-size: .18rem;
        }
        i.icon-check {
            background: rgba(0, 191, 165, 1);
            box-shadow: 0 2px 4px 0 rgba(0, 255, 220, 0.2);
        }
        i.icon-priority_high {
            background: rgba(254, 204, 80, 1);
            box-shadow: 0 2px 4px 0 rgba(254, 204, 80, 0.2);
        }
        i.icon-close {
            background: rgba(247, 122, 112, 1);
            box-shadow: 0 2px 4px 0 rgba(247, 122, 112, 0.4);
        }
        span {
            margin-left: .1rem;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
        }
    }
    &-check + &-check {
        margin-top: .16rem;
    }
}
